import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let camera, scene, renderer
let mesh

init()
initAxesHelper()
initControls()
animate()

function initAxesHelper(params) {
    scene.add(new THREE.AxesHelper(100))
}
function initControls(params) {
    const controls = new OrbitControls(camera,renderer.domElement)
}

function init(params) {
    //camera
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 400

    //scene
    scene = new THREE.Scene()

    //renderer
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)


//mesh
    const texture = new THREE.TextureLoader().load('textures/crate.gif')
    const geometry = new THREE.BoxGeometry(200, 200, 200)
    const material = new THREE.MeshBasicMaterial({ map: texture,side: THREE.DoubleSide})
    mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)

    //resize
    window.addEventListener('resize', onWindowResize);
}

function onWindowResize(params) {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

function animate(params) {

    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}